<template>
<a-card>
  <a-row :gutter="16">
    <a-col class="gutter-row" :span="8">
      <a-card size="small" title="多对多部门测试">
        <template slot="extra">
          <a-button size="small" icon="plus" @click="handleAdd" style="margin-right:8px;"/>
          <a-button size="small" icon="minus" @click="handleDeleteOne"/>
        </template>
        <many-auto-table ref="manyAutoTable" tableCode="804cd1dd41d64c6ca6ab2955eea57e35"></many-auto-table>
      </a-card>
    </a-col>
    <a-col class="gutter-row" :span="16">
      <a-row type="flex" :gutter="10">
        <a-col flex="auto">
          <a-card size="small" title="未关联">
            <!-- <a-table
              size="small"
              :bordered="true"
              :columns="rightColumns"
              :data-source="rightDataSource"
              :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            /> -->
            <many-auto-table ref="manyAutoTable" tableCode="f53f2c88702b4f53b8af3005b2b50b11"></many-auto-table>
          </a-card>
        </a-col>
        <a-col flex="none" style="align-self: center;">
          <div style="margin-bottom:5px;">
            <a-button size="small" icon="right"/>
          </div>
          <a-button size="small" icon="left"/>
        </a-col>
        <a-col flex="auto">
          <a-card size="small" title="已关联">
            <many-auto-table ref="manyAutoTable" tableCode="f53f2c88702b4f53b8af3005b2b50b11"></many-auto-table>
            <!-- <a-table
              size="small"
              :bordered="true"
              :columns="rightColumns"
              :data-source="rightDataSource"
              :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            /> -->
          </a-card>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</a-card>
</template>

<script>
import { deleteAction, getAction } from '@/api/manage'
import { filterObj } from '@/utils/util'
import ManyAutoTable from '../modules/ManyAutoTable'
export default {
  name: 'ManyAutoList',
  components: {
    ManyAutoTable
  },
  data() {
    return {
      leftColumns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 40,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '角色名称',
          align: 'center',
          dataIndex: 'roleName'
        },
        {
          title: '角色编码',
          align: 'center',
          dataIndex: 'roleCode'
        }
      ],
      rightColumns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '用户账号',
          align: 'center',
          dataIndex: 'username'
        },
        {
          title: '用户姓名',
          align: 'center',
          dataIndex: 'realname'
        }
      ],
      url: {
        list: '/sys/role/list'
      },
      rightDataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showLessItems: true,
        total: 0
      },
      /* table选中keys*/
      selectedRowKeys: [],
      /* table选中records*/
      selectionRows: [],
      customKey: '', // 左边table选中id
      currRecord: {}, // 左边table选中数据
      /* 筛选参数 */
      filters: {},
      /* 排序参数 */
      isorter: {
        column: 'createTime',
        order: 'desc'
      },
      queryParam: {},
      dataSource: [],
      loading: false
    }
  },
  methods: {
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()// 查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    handleTableChange(pagination, filters, sorter) {
      // 分页、排序、筛选变化时触发
      // TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData()
    },
    getQueryParams() {
      // 获取查询条件
      var param = Object.assign(this.queryParam, this.isorter, this.filters)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    getQueryField() {
      // TODO 字段权限控制
      var str = 'id,'
      this.leftColumns.forEach(function(value) {
        str += ',' + value.dataIndex
      })
      return str
    },
    onSelectChange(selectedRowKeys, selectionRows) { // 选择框选择
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
    customRow(record, index) { // 右边table选中
      return {
        // 这个style就是我自定义的属性，也就是官方文档中的props
        style: {
          // 行背景色
          'background-color': record.id === this.customKey ? '#e6f7ff' : ''
        },
        on: {
          // 鼠标单击行
          click: event => {
            // 根据行记录ID、子表名称查询子表配置属性及数据
            this.customKey = record.id
            this.currRecord = record
          }
        }
      }
    },
    handleAdd() {
      this.$refs.manyAutoTable.handleAdd()
    },
    handleDeleteOne() {
      const that = this
      this.$confirm({
        title: '确认删除',
        content: '是否删除该数据?',
        cancelText: '取消',
        okText: '确定',
        onOk() {
          that.$refs.manyAutoTable.handleDeleteOne()
        }
      })
    }
  },
  mounted() {
    this.loadData()
    console.log(this.ipagination)
  }
}
</script>

